<template>
    
    <el-form>
        <el-form-item label=" 关键字:"  style="width: 249px;">
            <el-input v-model="filterForm.keywords"/>
        </el-form-item>
        
        <el-form-item label="  价格:">
            从<el-input-number :min="0"  v-model="filterForm.minPrice"/>到
        <el-input-number :min="0" v-model="filterForm.maxPrice"/><br>
        </el-form-item>

        <el-form-item label="日期选择:" style="width: 500px;">
            <el-date-picker
        v-model="filterForm.dateRange"
        type="daterange"
        range-separator="To"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        
      />
        </el-form-item>

        <el-form-item label="类别筛选">
            <el-cascader
            v-model="filterForm.cId"
            :options="categoryTree"
            :props="{value:'id',label:'name',expandTrigger:'hover',emitPath:false}"
        />
        </el-form-item>

        <el-button style="margin-left: 150px;" type="primary" @click="$emit('submitForm',_filterForm)">搜索</el-button>

    </el-form>
    

</template>

<script setup>
import dayjs from 'dayjs';
import { ref,reactive,computed,defineEmits } from "vue";

import {useCategory} from "@/hooks/category";

const {categoryTree} = useCategory();

const filterForm = reactive({
    keywords:'',
    minPrice:0,
    maxPrice:0,
    dateRange:'',
    cId:''
});

//计算属性
const _filterForm = computed(()=>{
    const _filter = {...filterForm};

    //处理时间:判空
    if(_filter.dateRange.length ==2 ){
        const start = dayjs(_filter.dateRange[0]).format("YYYY-MM-DD");
        const end = dayjs(_filter.dateRange[1]).format("YYYY-MM-DD");
        _filter.start = Date.parse(start);
        _filter.end = Date.parse(end);
    }


    for(let key in _filter){
        //有空的属性，就删除
        if(!_filter[key]){
            delete _filter[key]
        }
    }
    return _filter;

    
});






</script>